<template>
  <div>
    <div class="title">
      <span class="titleContent">{{ title }}</span>
    </div>
    <div
      class="active-users card"
      style="width: 100%; height: 330px"
      ref="container"
    ></div>
  </div>
</template>
<script setup>
import { onBeforeUnmount, onMounted, ref, onActivated, onDeactivated } from "vue"
import * as echarts from "echarts"

let chart = null
function resize() {
  chart.resize()
}
const container = ref(null)
const props = defineProps(["title"])
const initChart = () => {
  if (chart == null) {
    chart = echarts.init(container.value)
  }
  chart.setOption({
    color: ["#569cde"],
    legend: {
      data: ["医疗总费用(万元)"],
      x: "right",
    },
    tooltip: {
      trigger: "axis",
    },
    radar: [
      {
        indicator: [
          {
            name: "药品费用",
            max: 800,
          },
          {
            name: "其他",
            max: 800,
          },
          {
            name: "诊疗费用",
            max: 800,
          },
          {
            name: "耗材费用",
            max: 800,
          },
        ],

        center: ["50%", "50%"],
        radius: 100,

        splitNumber: 5,
        shape: "circle",
        name: {
          formatter: "{value}",
          textStyle: {
            fontSize: 12,
            color: "#6b6051",
          },
        },
        splitArea: {
          areaStyle: {
            color: ["transparent", "#f0f0f0", "transparent", "#f0f0f0"],
          },
        },
        // 设置雷达图中间射线的颜色
        axisLine: {
          lineStyle: {
            color: "#bdbdbd",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#bdbdbd",
            type: "dotted", //dashed  solid dotted 射线类型【实线 虚线】
          },
        },
      },
    ],
    series: [
      {
        type: "radar",
      tooltip: {
        trigger: 'item'
      },
        data: [
          {
            value: [689.02, 513.64, 221.25, 135.63],
            name: "医疗总费用(万元)",
            areaStyle: {
              color: "#569cde",
            },
          },
        ],
      },
    ],
  })
  window.addEventListener("resize", resize)
}

onMounted(() => {
  initChart()
})
</script>
<style scoped>
.title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 20px;
}
.title::before {
  background: #108ee9;
  height: 100%;
  width: 5px;
  content: "";
  position: absolute;
  left: 0;
}
.titleContent {
  font-size: 14px;
  font-weight: 900;
}
</style>
